/* ==================
            布局
   ==================== */
  
  /*  -- flex弹性布局 -- */

  .block {
    display: block;
  }
  .response {
    width: 100%;
  }  
  .flex {
    display: flex;
  }
  
  .basis-xs {
    flex-basis: 20%;
  }
  
  .basis-sm {
    flex-basis: 40%;
  }
  
  .basis-df {
    flex-basis: 50%;
  }
  
  .basis-lg {
    flex-basis: 60%;
  }
  
  .basis-xl {
    flex-basis: 80%;
  }
  
  .flex-sub {
    flex: 1;
  }
  
  .flex-twice {
    flex: 2;
  }
  
  .flex-treble {
    flex: 3;
  }
  
  .flex-direction {
    flex-direction: column;
  }
  
  .flex-wrap {
    flex-wrap: wrap;
  }
  
  .align-start {
    align-items: flex-start;
  }
  
  .align-end {
    align-items: flex-end;
  }
  
  .align-center {
    align-items: center;
  }
  
  .align-stretch {
    align-items: stretch;
  }
  
  .self-start {
    align-self: flex-start;
  }
  
  .self-center {
    align-self: flex-center;
  }
  
  .self-end {
    align-self: flex-end;
  }
  
  .self-stretch {
    align-self: stretch;
  }
  
  .align-stretch {
    align-items: stretch;
  }
  
  .justify-start {
    justify-content: flex-start;
  }
  
  .justify-end {
    justify-content: flex-end;
  }
  
  .justify-center {
    justify-content: center;
  }
  
  .justify-between {
    justify-content: space-between;
  }
  
  .justify-around {
    justify-content: space-around;
  }
  /*  -- 内外边距 -- */
  
  .margin-0 {
    margin: 0;
  }
  
  .margin-xs {
    margin: 10px;
  }
  
  .margin-sm {
    margin: 20px;
  }
  
  .margin {
    margin: 30px;
  }
  
  .margin-lg {
    margin: 40px;
  }
  
  .margin-xl {
    margin: 50px;
  }
  
  .margin-top-xs {
    margin-top: 10px;
  }
  
  .margin-top-sm {
    margin-top: 20px;
  }
  
  .margin-top {
    margin-top: 30px;
  }
  
  .margin-top-lg {
    margin-top: 40px;
  }
  
  .margin-top-xl {
    margin-top: 50px;
  }
  
  .margin-right-xs {
    margin-right: 10px;
  }
  
  .margin-right-sm {
    margin-right: 20px;
  }
  
  .margin-right {
    margin-right: 30px;
  }
  
  .margin-right-lg {
    margin-right: 40px;
  }
  
  .margin-right-xl {
    margin-right: 50px;
  }
  
  .margin-bottom-xs {
    margin-bottom: 10px;
  }
  
  .margin-bottom-sm {
    margin-bottom: 20px;
  }
  
  .margin-bottom {
    margin-bottom: 30px;
  }
  
  .margin-bottom-lg {
    margin-bottom: 40px;
  }
  
  .margin-bottom-xl {
    margin-bottom: 50px;
  }
  
  .margin-left-xs {
    margin-left: 10px;
  }
  
  .margin-left-sm {
    margin-left: 20px;
  }
  
  .margin-left {
    margin-left: 30px;
  }
  
  .margin-left-lg {
    margin-left: 40px;
  }
  
  .margin-left-xl {
    margin-left: 50px;
  }
  
  .margin-lr-xs {
    margin-left: 10px;
    margin-right: 10px;
  }
  
  .margin-lr-sm {
    margin-left: 20px;
    margin-right: 20px;
  }
  
  .margin-lr {
    margin-left: 30px;
    margin-right: 30px;
  }
  
  .margin-lr-lg {
    margin-left: 40px;
    margin-right: 40px;
  }
  
  .margin-lr-xl {
    margin-left: 50px;
    margin-right: 50px;
  }
  
  .margin-tb-xs {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .margin-tb-sm {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  
  .margin-tb {
    margin-top: 30px;
    margin-bottom: 30px;
  }
  
  .margin-tb-lg {
    margin-top: 40px;
    margin-bottom: 40px;
  }
  
  .margin-tb-xl {
    margin-top: 50px;
    margin-bottom: 50px;
  }
  
  .padding-0 {
    padding: 0;
  }
  
  .padding-xs {
    padding: 10px;
  }
  
  .padding-sm {
    padding: 20px;
  }
  
  .padding {
    padding: 30px;
  }
  
  .padding-lg {
    padding: 40px;
  }
  
  .padding-xl {
    padding: 50px;
  }
  
  .padding-top-xs {
    padding-top: 10px;
  }
  
  .padding-top-sm {
    padding-top: 20px;
  }
  
  .padding-top {
    padding-top: 30px;
  }
  
  .padding-top-lg {
    padding-top: 40px;
  }
  
  .padding-top-xl {
    padding-top: 50px;
  }
  
  .padding-right-xs {
    padding-right: 10px;
  }
  
  .padding-right-sm {
    padding-right: 20px;
  }
  
  .padding-right {
    padding-right: 30px;
  }
  
  .padding-right-lg {
    padding-right: 40px;
  }
  
  .padding-right-xl {
    padding-right: 50px;
  }
  
  .padding-bottom-xs {
    padding-bottom: 10px;
  }
  
  .padding-bottom-sm {
    padding-bottom: 20px;
  }
  
  .padding-bottom {
    padding-bottom: 30px;
  }
  
  .padding-bottom-lg {
    padding-bottom: 40px;
  }
  
  .padding-bottom-xl {
    padding-bottom: 50px;
  }
  
  .padding-left-xs {
    padding-left: 10px;
  }
  
  .padding-left-sm {
    padding-left: 20px;
  }
  
  .padding-left {
    padding-left: 30px;
  }
  
  .padding-left-lg {
    padding-left: 40px;
  }
  
  .padding-left-xl {
    padding-left: 50px;
  }
  
  .padding-lr-xs {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .padding-lr-sm {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .padding-lr {
    padding-left: 30px;
    padding-right: 30px;
  }
  
  .padding-lr-lg {
    padding-left: 40px;
    padding-right: 40px;
  }
  
  .padding-lr-xl {
    padding-left: 50px;
    padding-right: 50px;
  }
  
  .padding-tb-xs {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  
  .padding-tb-sm {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  
  .padding-tb {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  
  .padding-tb-lg {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  
  .padding-tb-xl {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  /* -- 实线 -- */

  .solid, .solid-top, .solid-right, .solid-bottom, .solid-left, .solids,
  .solids-top, .solids-right, .solids-bottom, .solids-left, .dashed, .dashed-top,
  .dashed-right, .dashed-bottom, .dashed-left {
    position: relative;
  }
  
  .solid::after, .solid-top::after, .solid-right::after, .solid-bottom::after,
  .solid-left::after, .solids::after, .solids-top::after, .solids-right::after,
  .solids-bottom::after, .solids-left::after, .dashed::after, .dashed-top::after,
  .dashed-right::after, .dashed-bottom::after, .dashed-left::after {
    content: " ";
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: inherit;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
  }
  
  .solid::after {
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .solid-top::after {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .solid-right::after {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .solid-bottom::after {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .solid-left::after {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .solids::after {
    border: 4px solid #eee;
  }
  
  .solids-top::after {
    border-top: 4px solid #eee;
  }
  
  .solids-right::after {
    border-right: 4px solid #eee;
  }
  
  .solids-bottom::after {
    border-bottom: 4px solid #eee;
  }
  
  .solids-left::after {
    border-left: 4px solid #eee;
  }
  
  /* -- 虚线 -- */
  
  .dashed::after {
    border: 1px dashed #ddd;
  }
  
  .dashed-top::after {
    border-top: 1px dashed #ddd;
  }
  
  .dashed-right::after {
    border-right: 1px dashed #ddd;
  }
  
  .dashed-bottom::after {
    border-bottom: 1px dashed #ddd;
  }
  
  .dashed-left::after {
    border-left: 1px dashed #ddd;
  }


  /* -- 浮动 --  */

  .fl {
    float: left;
  }
  
  .fr {
    float: right;
  }
  
  /* ==================
            背景
   ==================== */
  
  .line-red::after, .lines-red::after {
    border-color: #e54d42;
  }
  
  .line-orange::after, .lines-orange::after {
    border-color: #f37b1d;
  }
  
  .line-yellow::after, .lines-yellow::after {
    border-color: #fbbd08;
  }
  
  .line-olive::after, .lines-olive::after {
    border-color: #8dc63f;
  }
  
  .line-green::after, .lines-green::after {
    border-color: #39b54a;
  }
  
  .line-cyan::after, .lines-cyan::after {
    border-color: #1cbbb4;
  }
  
  .line-blue::after, .lines-blue::after {
    border-color: #0081ff;
  }
  
  .line-purple::after, .lines-purple::after {
    border-color: #6739b6;
  }
  
  .line-mauve::after, .lines-mauve::after {
    border-color: #9c26b0;
  }
  
  .line-pink::after, .lines-pink::after {
    border-color: #e03997;
  }
  
  .line-brown::after, .lines-brown::after {
    border-color: #a5673f;
  }
  
  .line-grey::after, .lines-grey::after {
    border-color: #8799a3;
  }
  
  .line-gray::after, .lines-gray::after {
    border-color: #aaa;
  }
  
  .line-black::after, .lines-black::after {
    border-color: #333;
  }
  
  .line-white::after, .lines-white::after {
    border-color: #fff;
  }
  
  .bg-red {
    background-color: #e54d42;
    color: #fff;
  }
  
  .bg-orange {
    background-color: #f37b1d;
    color: #fff;
  }
  
  .bg-yellow {
    background-color: #fbbd08;
    color: #333;
  }
  
  .bg-olive {
    background-color: #8dc63f;
    color: #fff;
  }
  
  .bg-green {
    background-color: #39b54a;
    color: #fff;
  }
  
  .bg-cyan {
    background-color: #1cbbb4;
    color: #fff;
  }
  
  .bg-blue {
    background-color: #0081ff;
    color: #fff;
  }
  
  .bg-purple {
    background-color: #6739b6;
    color: #fff;
  }
  
  .bg-mauve {
    background-color: #9c26b0;
    color: #fff;
  }
  
  .bg-pink {
    background-color: #e03997;
    color: #fff;
  }
  
  .bg-brown {
    background-color: #a5673f;
    color: #fff;
  }
  
  .bg-grey {
    background-color: #8799a3;
    color: #fff;
  }
  
  .bg-gray {
    background-color: #F4F4F4;
    color: #666;
  }
  
  .bg-black {
    background-color: #333;
    color: #fff;
  }
  
  .bg-white {
    background-color: #fff;
    color: #666;
  }
  
  .bg-shadeTop {
    background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));
    color: #fff;
  }
  
  .bg-shadeBottom {
    background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
    color: #fff;
  }
  
  .bg-red.light {
    color: #e54d42;
    background: #fadbd9;
  }
  
  .bg-orange.light {
    color: #f37b1d;
    background: #fde6d2;
  }
  
  .bg-yellow.light {
    color: #fbbd08;
    background: #fef2ce;
  }
  
  .bg-olive.light {
    color: #8dc63f;
    background: #e8f4d9;
  }
  
  .bg-green.light {
    color: #39b54a;
    background: #d7f0db;
  }
  
  .bg-cyan.light {
    color: #1cbbb4;
    background: #d2f1f0;
  }
  
  .bg-blue.light {
    color: #0081ff;
    background: #cce6ff;
  }
  
  .bg-purple.light {
    color: #6739b6;
    background: #e1d7f0;
  }
  
  .bg-mauve.light {
    color: #9c26b0;
    background: #ebd4ef;
  }
  
  .bg-pink.light {
    color: #e03997;
    background: #f9d7ea;
  }
  
  .bg-brown.light {
    color: #a5673f;
    background: #ede1d9;
  }
  
  .bg-grey.light {
    color: #8799a3;
    background: #e7ebed;
  }
  
  .bg-gray.light {
    color: #666;
    background: #fadbd9;
  }
  
  .bg-gray.light {
    color: #888;
    background: #f1f1f1;
  }
  
  .bg-gradual-red {
    background-image: linear-gradient(45deg, #f43f3b, #ec008c);
    color: #fff;
  }
  
  .bg-gradual-orange {
    background-image: linear-gradient(45deg, #ff9700, #ed1c24);
    color: #fff;
  }
  
  .bg-gradual-green {
    background-image: linear-gradient(45deg, #39b54a, #8dc63f);
    color: #fff;
  }
  
  .bg-gradual-purple {
    background-image: linear-gradient(45deg, #9000ff, #5e00ff);
    color: #fff;
  }
  
  .bg-gradual-pink {
    background-image: linear-gradient(45deg, #ec008c, #6739b6);
    color: #fff;
  }
  
  .bg-gradual-blue {
    background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
    color: #fff;
  }
  
  
  /* ==================
            文本
   ==================== */
  
  .text-xs {
    font-size: 20px;
  }
  
  .text-sm {
    font-size: 24px;
  }
  
  .text-df {
    font-size: 28px;
  }
  
  .text-lg {
    font-size: 32px;
  }
  
  .text-xl {
    font-size: 36px;
  }
  
  .text-xxl {
    font-size: 48px;
  }
  
  .text-sl {
    font-size: 80px;
  }
  
  .text-xsl {
    font-size: 120px;
  }
  
  .text-Abc {
    text-transform: Capitalize;
  }
  
  .text-ABC {
    text-transform: Uppercase;
  }
  
  .text-abc {
    text-transform: Lowercase;
  }
  
//   .text-price::before {
//     content: "¥";
//     font-size: 80%;
//     margin-right: 4px;
//   }
  
  .text-cut {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .text-bold {
    font-weight: bold;
  }
  .text-content {
    line-height: 1.6;
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  
  .text-right {
    text-align: right;
  }
  
  .text-red, .line-red, .lines-red {
    color: #e54d42;
  }
  
  .text-orange, .line-orange, .lines-orange {
    color: #FF5E05;
  }
  
  .text-yellow, .line-yellow, .lines-yellow {
    color: #fbbd08;
  }
  
  .text-olive, .line-olive, .lines-olive {
    color: #8dc63f;
  }
  
  .text-green, .line-green, .lines-green {
    color: #39b54a;
  }
  
  .text-cyan, .line-cyan, .lines-cyan {
    color: #1cbbb4;
  }
  
  .text-blue, .line-blue, .lines-blue {
    color: #0081ff;
  }
  
  .text-purple, .line-purple, .lines-purple {
    color: #6739b6;
  }
  
  .text-mauve, .line-mauve, .lines-mauve {
    color: #9c26b0;
  }
  .text-pink, .line-pink, .lines-pink {
    color: #e03997;
  }
  .text-brown, .line-brown, .lines-brown {
    color: #a5673f;
  }
  .text-black, .line-black, .lines-black {
    color: #000;
  }
  .text-dark, .line-dark, .lines-dark {
    color: #606060;
  }
  .text-grey, .line-grey, .lines-grey {
    color: #8799a3;
  }
  .text-gray, .line-gray, .lines-gray {
    color: #909090;
  }
  .text-white, .line-white, .lines-white {
    color: #fff;
  }
  .text-ccc {
    color: #ccc;
  }